<template>
  <div>
    <p style="margin: 20px 0">
      <!-- <el-button @click="$refs.plTreeTable.toggleTreeExpansion(treeData[0])"
        >切换第一个</el-button
      >
      <el-button @click="$refs.plTreeTable.setTreeExpansion(treeData[2], true)"
        >展开第三个</el-button
      > -->
      <el-button @click="$refs.plTreeTable.setAllTreeExpansion()"
        >展开全部</el-button
      >
      <el-button @click="$refs.plTreeTable.clearTreeExpand()"
        >关闭所有</el-button
      >
      <!-- <el-button @click="getTreeExpansionEvent">获取已展开</el-button> -->
      <el-button type="primary" size="mini" plain @click="handeleExpansion"
        >展开二级</el-button
      >
    </p>
    <u-table
      ref="plTreeTable"
      fixed-columns-roll
      beautify-table
      header-drag-style
      :height="height"
      :treeConfig="{
        children: 'children',
        iconClose: 'el-icon-folder-add',
        iconOpen: 'el-icon-folder-remove',
        expandAll: false,
      }"
      @toggle-tree-expand="toggleTreeExpand"
      use-virtual
      row-id="id"
      border
      :data="tableData"
      :expand-row-keys="expandId"
      row-key="id"
    >
      <!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
      <u-table-column
        :tree-node="true"
        prop="date"
        label="我是树节点"
        fixed
        :width="200"
      />
      <u-table-column
        v-for="(item, i) in treeProps"
        :key="i"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      />
    </u-table>
  </div>
</template>

  <script>
export default {
  mounted() {
    // console.log(500 + (500 * 500) + (500 * 500 * 10))
    // const data = Array.from({ length: 500 }, (_, idx) => ({
    //   id: idx + "_" + 1,
    //   date: "2016-05-03",
    //   name: 1,
    //   ab: "欢迎使用u-table",
    //   address: idx,
    //   children: Array.from({ length: 2 }, (_, idx2) => ({
    //     id: idx + "_" + idx2 + "_" + 1,
    //     date: "2016-05-03",
    //     name: 1,
    //     ab: "欢迎使用u-table",
    //     address: idx + "_" + idx2,
    //     children: Array.from({ length: 1 }, (_, idx3) => ({
    //       id: idx + "_" + idx2 + "_" + idx3 + "_" + 1,
    //       date: "2016-05-03",
    //       name: 1,
    //       ab: "欢迎使用u-table",
    //       address: idx + "_" + idx2 + "_" + idx3,
    //     })),
    //   })),
    // }));
    // this.treeData = data; // 知道为啥treeData不在 data()方法里面定义吗？嘻嘻
    // // 设置表格数据
    // this.$refs.plTreeTable.reloadData(data);
    // // 获取表格实例，里面可以得到列，表格数据等等
    // console.log(this.$refs.plTreeTable.tableExample());
  },
  methods: {
    handeleExpansion() {
      for (let i = 0; i < this.tableData.length; i++) {
        // const element = array[i];
        this.$refs.plTreeTable.setTreeExpansion(this.tableData[i], true);
      }
    },
    // 获取已经展开的节点
    getTreeExpansionEvent() {
      console.log(this.$refs.plTreeTable.getTreeExpandRecords());
    },
    // 收起展开时触发
    toggleTreeExpand(row, treeExpanded, event) {
      console.log(row, treeExpanded, event);
    },
    /** 展开层级 */
    expandLevel(i) {
      console.log(i);
      this.expandNum = i;
      this.expandId.splice(0);
      if (this.expandNum > 0) {
        //expandNum==0 为第一层级 不需要展开 大于0再执行
        this.setExpandKeys(this.tableData, i);
      }
    },
    /** 递归设置展开层级对应的id数组 */
    setExpandKeys(dataList, num) {
      --num;
      if (num >= 0) {
        for (var i = 0; i < dataList.length; i++) {
          this.expandId.push(`${dataList[i].id}`);
          if (dataList[i].children) {
            this.setExpandKeys(dataList[i].children, num);
          }
        }
      }
    },
  },
  data() {
    return {
      height: 400,
      columns: Array.from({ length: 10 }, (_, idx) => ({
        prop: "address",
        id: idx,
        label: "地址" + idx,
        width: 200,
      })),
      expandNum: 0, //展开层级的数字
      expandId: [],
      treeProps: [
        { prop: "date", label: "评估项目", width: "400" },
        { prop: "address", label: "指标属性", width: "300" },
        { prop: "map", label: "采集要点", width: "300" },
      ],
      tableData: [
        {
          id: 1,
          date: "快速反应能力",
          name: "-",
          address: "-",
          level: 1,
          children: [
            {
              id: 11,
              date: "快速筹划",
              name: "-",
              address: "-",
              level: 2,
              children: [
                {
                  id: 111,
                  date: "方案计划齐全",
                  name: "-",
                  address: "-",
                  level: 3,
                  children: [
                    {
                      id: 1111,
                      date: "四级111",
                      name: "四级111",
                      address: "定量",
                      map: ["11", "22", "33"],
                      level: 4,
                    },
                    {
                      id: 1112,
                      date: "四级1",
                      name: "四级2",
                      address: "定量",
                      map: ["11", "22", "33"],
                      level: 4,
                    },
                    {
                      id: 1113,
                      date: "四级1",
                      name: "四级3",
                      address: "定量",
                      map: ["11", "22", "33"],
                      level: 4,
                    },
                    {
                      id: 1114,
                      date: "四级1",
                      name: "四级4",
                      address: "定量",
                      level: 4,
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          date: "突发事件处理能力",
          name: "-",
          address: "-",
          level: 1,
          children: [
            {
              id: 21,
              date: "随机应变",
              name: "-",
              address: "-",
              level: 2,
              children: [
                {
                  id: 211,
                  date: "方案计划齐全",
                  name: "-",
                  address: "-",
                  level: 3,
                  children: [
                    {
                      id: 2111,
                      date: "四级1",
                      name: "四级1",
                      level: 4,
                      address: "定量",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      expandNumCopy: 0, //保留当前展开的层级
    };
  },
};
</script>